angular.module('starter')
.directive("inputSelect", ["$parse", "$timeout", "$window",
    function($parse, $timer, window) {
        function link(scope, element, attr, ngModel) {
            scope.selected = {};
            scope.dropdown = false;
            scope.disabled = false;
            scope.header = "";
            scope.select_one = function(idx) {
                if (!scope.disabled) {
                    scope.header = scope.filtered_options[idx];
                    setModelValue(scope.header);
                }
            }

            scope.filter_options = function() {
                var filtered_options = [];
                angular.forEach(scope.options, function(o) {
                    if (o.indexOf(scope.header) >= 0) {
                        filtered_options.push(o);
                    }
                })
                scope.dropdown = true;
                scope.filtered_options = filtered_options;
            }

            scope.click_me = function() {
                scope.dropdown = true;
                scope.header_height = element[0].clientHeight;
                scope.filtered_options = scope.options;
            }
            scope.release_me = function() {
                $timer(function() {
                    scope.dropdown = false;
                    if (scope.filtered_options.indexOf(scope.header) < 0) {
                        window.alert(scope.name + "没有该选项: " + scope.header);
                        scope.header = "";
                        setModelValue(scope.header);
                    }
                }, 100)
            }

            scope.$watch(function() {
                return ngModel.$modelValue;
            }, function(newVal, oldVal) {
                if (angular.isDefined(newVal)) {
                    scope.header = newVal;
                } else {
                    scope.header = "空"
                }
            });

            scope.$watch(function() {
                return $parse(attr.disabled)(scope);
            }, function(newVal) {
                scope.disabled = angular.isDefined(newVal) ? !!newVal : false;
            });


            function setModelValue(v) {
                ngModel.$setViewValue(v);
            }
        }

        return {
            restrict: "E",
            replace: true,
            require: 'ngModel',
            link: link,
            scope: {
                options: "=",
                name: "=",
            },
            template: "<div class=input_select ng-class=\"{disabled: disabled}\">" +
                "<input type='text' class=header ng-model='header'" +
                " ng-change='filter_options()'" +
                " ng-blur='release_me()'" +
                " ng-click='click_me()'>" +
                "<ul ng-class='{dropdown: dropdown}' ng-style=\"{top: header_height+'px'}\">" +
                "<li ng-repeat='(i,o) in filtered_options track by $index' " +
                "ng-click=select_one(i) " +
                ">{{o}}</li>" +
                "</ul></div>",
        }
    }
])
